<template>
  <div class="playrules">
    <HeaderComponent title="" background="#00000000" color="#00000000" image_="1" size="4.8vw" />
    <div class="top_title">
      <img :src="require('@/assets/images/playrules/result.png')" alt="" />
    </div>
    <div class="nth">
      <!-- <div><img :src="require('@/assets/images/playrules/toumingKUANG.png" alt=""></div> -->
      <div>
        <img :src="require('@/assets/images/playrules/toumingKUANG.png')" alt="" />
      </div>
      <div></div>
      <div class="content">
        <span>1、购买一个罗盘可获赠一个星星，每个罗盘可转动一次。转动星愿罗盘获得的礼物自动进入个人背包，获得的礼物<span>仅限打赏使用。</span></span>
        <span>2、
          点击一次"罗盘"可进行1次抽奖，百分百获得礼物，碎片等奖励。奖励放入背包中，可随时赠送，兑换。</span>
        <!-- <span>3、
          选中合成礼物时，将展示背包可用于合成的合成材料，您可以选择并调整原料个数，也可使用<span>推荐方案</span>，当选择的合成材料总金额小于合成礼物价值时，无法成功合成。</span>
        <span>4、
          推荐方案将尽可能为您推荐损耗较少的方案，该方案可能不是最小损耗，您可以自行调整方案。</span>
        <span>5、 当选择的合成礼物价值超过背包原料总价值时，无法成功合成。</span>
        <span>6、
          选用的合成材料总价值达到合成礼物价值即可进行礼物合成，<span>多出部分不予退回</span>，需谨慎操作。</span>
        <span>7、
          成功合成后，将扣除相应的背包原料，并将合成礼物发放到背包，可在“合成记录”中查看合成记录。</span> -->
        <span>3、 通过星愿罗盘获得的碎片可兑换礼物，麦位框，进场秀等奖励。</span>
      </div>
    </div>
    <div class="top_title">
      <img :src="require('@/assets/images/playrules/shuoming.png')" alt="" />
    </div>
    <div class="nth nth_">
      <div>
        <img :src="require('@/assets/images/playrules/toumingKUANG.png')" alt="" />
      </div>
      <div></div>
      <div class="content">
        <span>1、星愿罗盘是提升用户房间语音聊天互动体验的功能，仅供娱乐交流使用。用户获得的奖励不得方向兑换成现金或有价值的商品。</span>
        <span>2、
          平台禁止将通过星愿罗盘获得的奖励进行线上或线下交易，平台严厉打击以盈利为目的的礼物交易行为，通过非正当渠道获取礼物的用户需自行承担不利后果。
        </span>
        <span>3、
          任何影响互动公平性的用户及利用平台进行违法违规活动的用户，官方有权取消其参与本活动的资格，并收回违规账号非法获得的奖励；情节严重者，平台有权追究相关法律责任。</span>
        <span>4、
          消费中清注意保管好账号、密码、短信验证码等登录操作凭证，谨防上当受骗。</span>
        <span v-if="isiOS">5、 本活动于苹果公司无关。</span>
        <span v-else>5、本活动最终解释权归举办方所有。</span>
      </div>
    </div>
    <div class="top_title">
      <img :src="require('@/assets/images/playrules/gailv.png')" alt="" />
    </div>
    <div class="nth_three">
      <!-- <img :src="require('@/assets/images/playrules/toumingKUANG.png" alt="" /> -->
      <div class="probability">
        <div>奖励获取概率</div>
        <div class="Arrlist">
          <div v-for="item,index in list" :key="index">
            <span>{{item.name}}</span><span>{{item.probability}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { lotteryBoxgiftlist } from '@/api/user'
import MessageBoxFun from '@/components/message_box/MessageBox'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
export default defineComponent({
  components: {
    HeaderComponent
  },
  setup () {
    const isiOS = ref<boolean>((window as any).isiOS)
    const list = ref<Array<any>>([])
    const boxgiftlist = async ():Promise<void> => {
        const dataRes = await lotteryBoxgiftlist({})
        if (dataRes.data.status == 0) {
            list.value = dataRes.data.result;
        } else {
            MessageBoxFun({
                message: dataRes.data.text,
                delay: 2000
            });
        }
    }
    boxgiftlist()
    return {
      isiOS,
      list,
      boxgiftlist
    }
  }
})
</script>

<style lang="less" scope>
@import './PlayRules.less';
</style>